<template>
  <div class="subjectentry">
    <!-- 无图片 -->
    <div v-if="!datas || !datas.imageList || datas.imageList.length === 0" class="upload">
      <!-- <i class="iconfont icon-lunbotu" /> -->
      <img src="../../../assets/img/xkrk.png" alt="" />
    </div>

    <!-- 一行两个/学科封面 -->
    <div v-if="imageList && imageList[0] && commodityType === 0" class="type0">
      <div v-for="(item, index) in imageList" :key="index" class="imgLis" :style="{ margin: datas.imageMargin + 'px' }">
        <!-- 图片 -->
        <div class="listpic">
          <img src="../../../assets/images/imgs.png" draggable="false" :style="{'border-radius': datas.borderRadius + 'px'}" v-if="!item.src" />
          <img :src="item.src" draggable="false" :style="{ 'border-radius': datas.borderRadius + 'px' }" v-else />
        </div>
        <!-- 标题和描述 -->
        <div class="title">
          <span style="font-weight:bold;" v-show="item.text">{{ item.text }}</span>
          <span v-show="item.desc">{{ item.desc }}</span>
        </div>
      </div>
    </div>

    <!-- 一行三个/教材封面   -->
    <div v-if="imageList && imageList[0] && commodityType === 1" class="type1">
      <div v-for="(item, index) in imageList" :key="index" class="imgLis" :style="{ margin: datas.imageMargin + 'px' }">
        <div class="listpic">
          <img class="listbg" src="../../../assets/images/obliqueLine.png" draggable="false" :style="{'border-radius': datas.borderRadius + 'px'}" v-if="!item.src" />
          <img class="listbg" :src="item.src" draggable="false" :style="{ 'border-radius': datas.borderRadius + 'px' }" v-else />
          <img class="jiaocai" :src="item.jcurl" draggable="false" />
        </div>
      </div>
    </div>

    <!-- 横向滑动 -->
    <!-- <div v-if="imageList && imageList[0] && commodityType === 2" class="type2">
      <div v-for="(item, index) in imageList" :key="index" class="imgLis">
        <div class="listpic">
          <img src="../../../assets/images/imgs.png" draggable="false" :style="{'border-radius': datas.borderRadius + 'px'}" v-if="!item.src" />
          <img :src="item.src" draggable="false" :style="{ 'border-radius': datas.borderRadius + 'px' }" v-else />
        </div>
        <div class="title">
          <span v-show="item.text">{{ item.text }}</span>
          <span v-show="item.desc">{{ item.desc }}</span>
        </div>
      </div>
    </div> -->

    <!-- 组件操作 -->
    <slot name="deles" />
  </div>
</template>

<script>
export default {
  name: "Subjectentry",
  props: {
    datas: Object,
  },
  data() {
    return {};
  },
  computed: {
    /* 类型切换 */
    commodityType() {
      // console.log(this.datas.commodityType, "----------------类型切换");
      return this.datas.commodityType;
    },
    /* 图片删除或者增加 */
    imageList() {
      // console.log(this.datas.imageList, "-------数量");
      return this.datas.imageList;
    },

    /* 图片间距 */
    imageMargin() {
      if (this.datas.commodityType === 1) {
        return 0;
      } else {
        return this.datas.imageMargin;
      }
    },
  },
  watch: {
    imageMargin() {},
  },
  methods: {
    /* 创建轮播对象 */
  },
};
</script>

<style scoped lang="scss">
.subjectentry {
  position: relative;
  /* 无图片 */
  .upload {
    // background: #979797;
    width: 100%;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    // i {
    //   font-size: 120px;
    // }
    img {
      width: 100%;
    }
  }
  .type0 {
    display: flex;
    flex-wrap: wrap;
    .imgLis {
      width: 45%;
      &:nth-child(2n) {
        margin-left: 0 !important;
      }
      .listpic{
        height: 120px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .title {
        font-size: 14px;
        height: 50px;
        line-height: 20px;
        background: #ffffff;
        text-align: center;
        padding-top: 10px;
        span{
          display:block;
        }
      }
    }
  }
  .type1 {
    display: flex;
    flex-wrap: wrap;
    // background: #fff;
    margin: 10px auto;
    // border-radius: 10px;
    .listpic{
      width: 107px;
      height: 62px;
      position: relative;
      .listbg{
        width: 100%;
        height: 100%;
      }
      .jiaocai{
        position: absolute;
        left: 5px;
        top: -15px;
        width: 50px;
        height: 66px;
      }
    }
    // .imgLis {
    //   width: 27%;
    //   position: relative;
    //   &:nth-child(3n) {
    //     margin-right: 0 !important;
    //   }
    //   img {
    //     width: 100%;
    //   }
    //   span {
    //     font-size: 14px;
    //     width: 100%;
    //     display: block;
    //     text-align: center;
    //     line-height: 32px;
    //     position: absolute;
    //     bottom: 35%;
    //     left: 0;
    //     -webkit-box-sizing: border-box;
    //     box-sizing: border-box;
    //     // background-color: rgba(51, 51, 51, 0.8);
    //     color: #ffffff;
    //   }
    // }
  }
  .type2 {
    overflow-x: scroll;
    display: flex;
    margin: 10px;
    /* 滚动条 */
    &::-webkit-scrollbar {
      height: 6px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #636363;
      border-radius: 6px;
    }
    .el-collapse-item__header,
    .el-collapse-item__wrap {
      border-bottom: 0 !important;
    }
    .imgLis {
      position: relative;
      img {
        padding-right: 10px;
        // width: 180px;
        height: 105px;
      }
      .title {
        position: absolute;
        bottom: 48px;
        left: 20px;
        span{
          display: block;
          font-size: 14px;
          color: #fff;
        }
      }
    }
  }
}
</style>
